<template>
  <div class="box">
    <br />
    <el-rwo class="title size">{{ queryParams.trainName }} </el-rwo>
    <br />

    <el-row class="title"
      >报名时间：{{ queryParams.signTimeStr }} 培训时间：{{
        queryParams.timeStr
      }}
      <!-- 参赛团队：{{ groups }} 参赛运动员：{{ sporters }} -->
      <div v-show="payType == 1">
        <el-button
          v-if="status == 1 || status == 4 || status == 3"
          type="success"
          class="button"
          round
          @click="verification"
          >核销</el-button
        >
        <el-button v-else type="success" class="button" round>已核销</el-button>
      </div>
    </el-row>

    <!-- 报名费 -->
    <div v-if="queryParams.projectList?.length != 0">
      <el-row><span class="nav-title">培训科目</span> </el-row>
      <!-- 培训科目 -->
      <el-table
        v-loading="loading"
        :data="queryParams.projectList"
        @selection-change="handleSelectionChange"
      >
        <el-table-column label="序号" type="index" width="55" align="center" />
        <el-table-column label="科目名称" prop="projectName" min-width="120" />
        <el-table-column label="是否必选科目" min-width="120">
          <template #default="props">
            <div v-if="props.row.isNecessary == 1">是</div>
            <div v-else>否</div>
          </template>
        </el-table-column>
        <el-table-column label="科目费用" prop="cost" min-width="120" />
      </el-table>
      <br />
      <el-row justify="end">
        <div class="bulletin">
          共报科目数:{{ queryParams?.projectList?.length }}科
        </div>
        <div class="total">合计:{{ queryParams.projectFee }}元</div>
      </el-row>
      <br />
    </div>

    <div v-if="queryParams.examList?.length != 0">
      <el-row><span class="nav-title">考试科目</span> </el-row>

      <el-table
        v-loading="loading"
        :data="queryParams.examList"
        @selection-change="handleSelectionChange"
      >
        <el-table-column label="序号" type="index" width="55" align="center" />
        <el-table-column label="科目名称" prop="projectName" min-width="120" />
        <el-table-column label="是否必选科目" min-width="120">
          <template #default="props">
            <div v-if="props.row.isNecessary == 1">是</div>
            <div v-else>否</div>
          </template>
        </el-table-column>
        <el-table-column label="科目费用" prop="cost" min-width="120" />
      </el-table>
      <br />
      <el-row justify="end">
        <div class="bulletin">
          共报科目数:{{ queryParams?.examList?.length }}科
        </div>
        <div class="total">合计:{{ queryParams.examFee }}元</div>
      </el-row>
      <br />
    </div>
    <div v-if="queryParams.hotelList?.length != 0">
      <el-row><span class="nav-title">入住酒店</span> </el-row>

      <el-table
        v-loading="loading"
        :data="queryParams.hotelList"
        @selection-change="handleSelectionChange"
      >
        <el-table-column label="序号" type="index" width="55" align="center" />
        <el-table-column label="酒店名称" prop="name" min-width="120" />

        <el-table-column label="房间数" prop="rooms" min-width="120" />
        <el-table-column
          label="入住时间"
          prop="moveIntoTimeStr"
          min-width="120"
        />

        <el-table-column label="酒店费用" prop="cost" min-width="120" />
      </el-table>
      <br />
      <el-row justify="end">
        <div class="bulletin">
          入住晚数:{{ queryParams?.hotelList?.length }}晚
        </div>
        <div class="total">合计:{{ queryParams.hotelFee }}元</div>
      </el-row>
      <br />
    </div>

    <div v-if="queryParams.otherList?.length != 0">
      <el-row><span class="nav-title">其他费用</span> </el-row>

      <el-table
        v-loading="loading"
        :data="queryParams.otherList"
        @selection-change="handleSelectionChange"
      >
        <el-table-column label="序号" type="index" width="55" align="center" />
        <el-table-column label="费用名称" prop="name" min-width="120" />
        <el-table-column label="费用金额" prop="spend" min-width="120">
        </el-table-column>
      </el-table>
      <br />
      <el-row justify="end">
        <div class="bulletin">
          费用项:{{ queryParams?.otherList?.length }}项
        </div>
        <div class="total">合计:{{ queryParams.otherFee }}元</div>
      </el-row>
      <br />
    </div>

    <br />
    <br />
    <br />

    <el-row justify="end">
      合计:
      <i class="span">{{ (queryParams.totalAmount * 1 || 0).toFixed(2) }}</i> 元
      &nbsp;&nbsp;&nbsp;&nbsp;已支付:
      <i class="span">{{ (queryParams.totalPay * 1 || 0).toFixed(2) }}</i> 元
    </el-row>
  </div>
</template>

<script setup>
import { useRouter, useRoute } from "vue-router";
import { getCurrentInstance } from "@vue/runtime-core";
import { getOrderDetail, refundHexiao } from "@/api/train/verity.js";

// import { onActivated } from "vue";
const { proxy } = getCurrentInstance();
const router = useRouter();
const route = useRoute();
const id = ref(route.query.id);
const payType = ref(route.query.payType);
const status = ref(route.query.status);
const data = reactive({
  form: {},
  queryParams: {},
});
const { form, queryParams } = toRefs(data);

initData();
async function initData() {
  form.value.orderId = id.value;
  let res = await getOrderDetail(form.value);
  queryParams.value = res.data;
  console.log(res);
}

// 核销
async function verification() {
  // 退款核销status=4  flag=3
  // 订单审核核销status=1 flag=2
  let a = null;
  if (status.value == 4 || status.value == 3) a = 3;
  if (status.value == 1) a = 2;

  const param = { id: id.value, flag: a };
  proxy.$modal
    .confirm("确定核销该订单吗？")
    .then(() => {
      return refundHexiao(param);
    })
    .then(() => {
      initData();
      status.value = 2;
      proxy.$modal.msgSuccess("订单核销成功！");
    });
}
</script>

<style scope>
.box {
  padding: 30px;
}
.title {
  display: flex;
  line-height: 35px;
  justify-content: center;
}
.size {
  font-size: 20px;
}
.button {
  margin-left: 30px;
}
.nav-title {
  font-size: 18px;
  margin-right: 30px;
  line-height: -3px;
}
.el-row {
  border: 0;
}
.total {
  margin-left: 30%;
}
.span {
  color: #d9001b;
  line-height: 24px;
  font-weight: 400;
}
</style>
